<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>数据表格</title>
    <link href="../../component/layui/css/layui.css" rel="stylesheet" />
    <link href="../../admin/css/pearButton.css" rel="stylesheet"/>
    <link href="../../admin/css/pearCommon.css" rel="stylesheet"/>
    <link href="../../admin/css/pearTable.css" rel="stylesheet"/>
</head>
<body class="pear-container">

<!--视图布局-->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="genTable" lay-skin="line" lay-filter="userTable"></table>
    </div>
</div>


<!--行工具栏-->
<script type="text/html" id="barDemo">
    <button class="layui-icon layui-icon-export pear-btn pear-btn-primary pear-btn-sm"  lay-event="export" />
</script>

<!--字段格式化-->
<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ d.status == 0 ? 'checked' : '' }}>
</script>

<script type="text/html" id="sex">
    {{#if (d.sex == 0) { }}
    <span>男</span>
    {{# }else if(d.sex == 1){ }}
    <span>女</span>
    {{# } }}
</script>

<script type="text/html" id="createTime">
    <div> {{layui.util.toDateString(d.createTime, "yyyy年MM月dd日")}} </div>
</script>

<!--逻辑脚本-->
<script src="../../component/layui/layui.js"></script>
<script   type="text/javascript"  th:inline="none">
    layui.use(['table','form','operate'],function(){
        var table = layui.table;
        var form = layui.form;
        var operate = layui.operate;

        table.render({
            elem: '#genTable',
            url: '/gen/table/dbTable',
            page: false ,
            skin:'line',
            toolbar: false,
            cols:[[
                {type:  'checkbox'},
                {field: 'name', title: '表名称'},
                {field: 'comment', title: '备注'},
                {field: 'engine', title: '引擎'},
                {title: '操作', width: 75, align: 'center', toolbar: '#barDemo'}
            ]]
        });

        //头工具栏监听
        table.on('toolbar(userTable)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;

            if (obj.event === 'add') {

                operate.open("导入","/gen/table/add",{width:"800px",height:"530px"});

            } else if(obj.event === 'del'){

                operate.removeByIds('/system/user/deleteByIds',operate.arrayToStr(data),'userTable');

            } else if(obj.event === 'refresh'){

                table.reload('userTable');
            }

        });

        table.on('tool(userTable)', function(obj) {
            var data = obj.data,
                event = obj.event;

            if (event === 'del') {

                operate.removeById('/system/user/deleteById',data['id'],'userTable');

            } else if (event === 'edit') {

                operate.open("用户修改","/system/user/edit?id="+data['id'],{width:'700px',height:'450px'});
            }
        });

        //监听账号状态切换
        form.on('switch(status)', function(obj){
            if(obj.elem.checked){
                operate.put('/system/user/enable/'+obj.value,null,function(result){
                    console.log("开启");
                });
            }else{
                operate.put('/system/user/disable/'+obj.value,null,function(result){
                    console.log("关闭");
                });
            }
        });

        //监听账号状态查询
        form.on('submit(select)', function(data){
            table.reload('userTable', {where: data.field,page: {curr: 1}});
        });

    })


</script>

</body>
</html>